<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElCard, ElButton, ElTable, ElTableColumn, ElTag, ElEmpty, ElLoading, ElMessage } from 'element-plus'
import { Refresh, Present } from '@element-plus/icons-vue'
import request from '@/utils/request'

interface GiftSend {
  id: string
  liveRoomId: string
  liveRoom?: {
    title: string
  }
  giftId: string
  gift?: {
    name: string
  }
  quantity: number
  unitPricePoints: number
  totalPoints: number
  senderUserId: string
  sender?: {
    loginId: string
  }
  createdAt: string
}

const list = ref<GiftSend[]>([])
const loading = ref(false)

// 获取礼物发送记录
async function fetchList() {
  loading.value = true
  try {
    const { data } = await request.get('/api/admin/admin-gift-sends')
    list.value = data
  } catch (error) {
    console.error('선물 발송 기록 가져오기 실패:', error)
    ElMessage.error('선물 발송 기록 가져오기 실패')
  } finally {
    loading.value = false
  }
}

// 格式化时间
const formatTime = (time: string) => {
  return new Date(time).toLocaleString('ko-KR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 格式化数字
const formatNumber = (num: number | string | undefined | null) => {
  if (num === undefined || num === null) return '0'
  const n = typeof num === 'string' ? parseInt(num) || 0 : num
  return n.toLocaleString()
}

onMounted(fetchList)
</script>

<template>
  <div class="mobile-page">
    <!-- 页面头部 -->
    <div class="mobile-page-header">
      <div class="page-title">
        <el-icon class="title-icon"><Present /></el-icon>
        <span>선물 발송 기록</span>
      </div>
      <el-button
        type="primary"
        size="small"
        :loading="loading"
        @click="fetchList"
      >
        <el-icon><Refresh /></el-icon>
        새로고침
      </el-button>
    </div>

    <!-- 礼物发送记录列表 -->
    <div class="mobile-content">
      <el-card v-loading="loading" class="gift-sends-card" shadow="never">
        <template v-if="list.length === 0 && !loading">
          <el-empty description="선물 발송 기록이 없습니다" />
        </template>

        <template v-else>
          <div class="gift-sends-list">
            <div
              v-for="item in list"
              :key="item.id"
              class="gift-send-item"
            >
              <!-- 礼物信息 -->
              <div class="gift-info">
                <div class="gift-name">
                  {{ item.gift?.name || `선물 ID: ${item.giftId}` }}
                </div>
                <div class="gift-details">
                  <span class="quantity">수량: {{ formatNumber(item.quantity) }}</span>
                  <span class="unit-price">단가: {{ formatNumber(item.unitPricePoints) }}P</span>
                </div>
              </div>

              <!-- 总价 -->
              <div class="total-points">
                {{ formatNumber(item.totalPoints) }}P
              </div>

              <!-- 详细信息 -->
              <div class="send-details">
                <div class="detail-row">
                  <span class="label">라이브 방:</span>
                  <span class="value">{{ item.liveRoom?.title || `방 ID: ${item.liveRoomId}` }}</span>
                </div>
                <div class="detail-row">
                  <span class="label">발송자:</span>
                  <span class="value">{{ item.sender?.loginId || `사용자 ID: ${item.senderUserId}` }}</span>
                </div>
                <div class="detail-row">
                  <span class="label">시간:</span>
                  <span class="value">{{ formatTime(item.createdAt) }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.mobile-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mobile-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.title-icon {
  margin-right: 8px;
  color: var(--el-color-primary);
}

.mobile-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.gift-sends-card {
  border-radius: 12px;
}

.gift-sends-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gift-send-item {
  background: var(--el-fill-color-lighter);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--el-border-color-light);
}

.gift-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.gift-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  flex: 1;
}

.gift-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--el-text-color-regular);
}

.total-points {
  font-size: 18px;
  font-weight: 700;
  color: var(--el-color-primary);
  text-align: right;
  margin-bottom: 12px;
}

.send-details {
  border-top: 1px solid var(--el-border-color-lighter);
  padding-top: 12px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-row .label {
  color: var(--el-text-color-regular);
  font-weight: 500;
  min-width: 60px;
}

.detail-row .value {
  color: var(--el-text-color-primary);
  text-align: right;
  flex: 1;
  margin-left: 12px;
  word-break: break-all;
}

/* 响应式优化 */
@media (max-width: 480px) {
  .mobile-page-header {
    padding: 12px;
  }

  .page-title {
    font-size: 16px;
  }

  .mobile-content {
    padding: 12px;
  }

  .gift-send-item {
    padding: 12px;
  }

  .gift-name {
    font-size: 14px;
  }

  .total-points {
    font-size: 16px;
  }

  .detail-row {
    font-size: 13px;
  }
}
</style>
